// 定义菜单项状态的类型
import { Ref, onMounted } from 'vue';
type MenuState = {
  target: HTMLElement;  // 菜单项的 DOM 元素
  open: Ref<boolean>;        // 菜单项是否打开
};

// 维护当前打开的菜单项的数组
let openMenus: MenuState[] = [];

// 传入一个菜单项的 DOM 元素和其对应的 open 状态，切换菜单项的打开状态
function switchOpen(target: HTMLElement, open: Ref<boolean>) {
  if (!target) return;
  // 检查某个菜单项是否包含当前被点击的菜单项的函数
  const containsTarget = (menu: MenuState): boolean => menu.target.contains(target);
  openMenus = openMenus.filter(menu => {  // 过滤 openMenus 数组，移除不包含当前点击目标的菜单项，并将其 open 设置为 false
    if (containsTarget(menu)) {
      return true;
    } else {
      menu.open.value = false;
      return false;
    }
  });
  open.value = true;  // 将当前点击的菜单项添加到 openMenus 数组中，并设置其 open 为 true
  openMenus.push({ target, open: open });

}



type HideMenuFunction = (root: Ref<HTMLElement | null>, open: Ref<boolean>) => void;

const bindingHideMenu: HideMenuFunction = (root, open) => {
  // 定义一个点击事件处理器
  const clickOutsideHandler = (event: MouseEvent) => {

    // 如果菜单已经是关闭状态，则直接返回
    if (!open.value) return;

    // 检查点击事件是否发生在菜单外部
    if (!root.value || !root.value.contains(event.target as HTMLElement)) {
      // 如果点击在菜单外部，则关闭菜单
      open.value = false;
    }

  };

  // 在组件挂载时添加事件监听器
  onMounted(() => {
    document.addEventListener("click", clickOutsideHandler);
    document.addEventListener("keydown", (e) => {
      if (e.key === 'Escape')
        open.value = false;
    })
  });
};


// 导出 switchOpen 函数，以便在其他组件中使用
export { switchOpen, bindingHideMenu };
export default { switchOpen, bindingHideMenu };